import React from "react";

class PassWord extends React.Component{

    constructor(props){
        super(props);
        this.props = props;
        this.state={
            value:"",
            realValue:"",
            showCode:false,
            rootClientHeight:20
        }
        this.rootClientHeight = "20px";
        this.showCode = this.showCode.bind(this);
        this.change=this.change.bind(this);
        // this.wordCoding=this.wordCoding.bind(this);
    }

    setValue(keyValue){
        let realValue = "";
        if(typeof keyValue === "string"){
            realValue = this.state.realValue + keyValue;
        }else{
            realValue = this.state.realValue.substr(0,this.state.realValue.length-1);
        }

        if(this.props.max) realValue = realValue.substr(0,parseInt(this.props.max))
        
        this.setState({realValue},()=>{
            if(this.state.showCode){
                this.setState({value:this.state.realValue});
            }else{
                let code = "";
                for(let i in this.state.realValue){
                    code += this.props.code ? this.props.code : "●";
                }
                this.setState({value:code});
            }
            this.props.onChange({value:this.state.realValue});
        })
    }

    change(e){
        if(e){
            let keyValue = e.nativeEvent.data;
            // console.log(keyValue); // ---
            this.setValue(keyValue);
        }else{
            if(this.state.showCode){
                this.setState({value:this.state.realValue});
            }else{
                let code = "";
                for(let i in this.state.realValue){
                    code += this.props.code ? this.props.code : "●";
                }
                this.setState({value:code});
            }
        }

        if(this.props.reg){
            setTimeout(()=>{
                // let reg = new RegExp(this.props.reg.substr(1,this.props.reg.length-2));
                if(!this.props.reg.test(this.state.realValue) && this.state.realValue){
                    this.Input.focus();
                    // this.rootEl.style.backgroundColor="#999";
                    this.Input.style.backgroundColor="#999";
                    this.Input.style.color="#fff";
                }else{
                    this.rootEl.style.backgroundColor="#fff";
                    this.Input.style.backgroundColor="#fff";
                    this.Input.style.color="#000";
                }
            },50);
        }
    }

    showCode(){
        this.setState({showCode:!this.state.showCode},()=>{
            this.change();
        });
    }

    rootStyle = {display:"inline-block", position:"relative"}

    inputConfig={
        type:"text",
        className:"",
        style:{
            width:"100%",
            height:"100%",
            fontSize:"inherit",
            border:"0"
        }
    }

    componentDidMount(){
        this.setState({rootClientHeight:this.rootEl.clientHeight});

        if(this.props.focus){
            this.Input.focus();
        }
        if(this.props.select){
            this.Input.select();
        }
    }

    render(){
        return (
            <span className={this.props.className} 
                style={{...this.rootStyle,paddingRight:`${this.state.rootClientHeight / 2 * 1.8 + 15}px`}}
                ref = {rootEl => this.rootEl = rootEl}
            >
                <input {...this.props} 
                    type="text"
                    className=""
                    style={{border: "0", outline: "none",width: "100%",height: "100%",fontSize:"inherit"}}
                    value={this.state.value} 
                    onChange={(e)=>{this.change(e)}} 
                    ref={Input=>this.Input = Input} 
                />
                {this.state.showCode 
                    ?  <img onClick={this.showCode} src={require("./code-show.png").default}
                        style={{height:`${this.state.rootClientHeight / 2}px`,position:"absolute", opacity:"1",
                            right:"10px",top:`calc(50% - ${this.state.rootClientHeight / 4}px)`}} 
                    />
                    :  <img onClick={this.showCode} src={require("./code-hidden.png").default}
                        style={{height:`${this.state.rootClientHeight / 2}px`,position:"absolute", opacity:".3",
                            right:"10px",top:`calc(50% - ${this.state.rootClientHeight / 4}px)`}} 
                        />
                }
                <span style={{display:"none"}}>{this.state.value}</span>
            </span>
        )
    }
}

export default PassWord;